<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜蜜空间 - 你我的专属恋爱天地</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 添加Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <h1><i class="fas fa-heart"></i> <span id="site-title">甜蜜空间</span></h1>
            <div class="menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="album.html">相册</a></li>
                    <li><a href="diary.html">日志</a></li>
                    <li><a href="memory.html">纪念日</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h2>欢迎来到我们的甜蜜空间</h2>
                <p>这里记录着我们一路走来的点点滴滴，每一个瞬间都值得珍藏</p>
                <div class="couple-info">
                    <div class="person" id="boy-info">
                        <div class="avatar">
                            <img src="img/couples/boy.jpg" alt="男生头像" id="boy-avatar">
                        </div>
                        <h3 id="boy-name">加载中...</h3>
                    </div>
                    <div class="love-days">
                        <div class="heart">
                            <i class="fas fa-heart"></i>
                            <span id="days-together">0</span>
                        </div>
                        <p>在一起的日子</p>
                    </div>
                    <div class="person" id="girl-info">
                        <div class="avatar">
                            <img src="img/couples/girl.jpg" alt="女生头像" id="girl-avatar">
                        </div>
                        <h3 id="girl-name">加载中...</h3>
                    </div>
                </div>
                <div class="cta-buttons">
                    <a href="album.html" class="btn btn-primary">查看相册</a>
                    <a href="diary.html" class="btn btn-secondary">浏览日志</a>
                </div>
            </div>
        </div>
    </section>

    <section class="features">
        <div class="container">
            <h2 class="section-title" id="features-title">我们的专属功能</h2>
            <div class="feature-cards" id="feature-cards">
                <!-- 特性卡片将通过 JavaScript 动态生成 -->
                <div class="feature-card">
                    <div class="icon">
                        <i class="fas fa-spinner fa-spin"></i>
                    </div>
                    <h3>加载中...</h3>
                    <p>正在加载功能信息...</p>
                </div>
            </div>
        </div>
    </section>

    <section class="recent-moments">
        <div class="container">
            <h2 class="section-title" id="moments-title">最近的美好时刻</h2>
            <div class="moments-grid" id="moments-grid">
                <!-- 美好时刻卡片将通过 JavaScript 动态生成 -->
                <div class="moment-card">
                    <div class="moment-image">
                        <img src="img/placeholder/moment.jpg" alt="加载中">
                    </div>
                    <div class="moment-info">
                        <h3>加载中...</h3>
                        <p class="date">加载中...</p>
                        <p class="description">正在加载内容，请稍候...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p id="copyright">&copy; 2023 甜蜜空间 - 你我的专属恋爱天地</p>
            <p id="slogan">一起创造更多美好回忆</p>
        </div>
    </footer>

    <!-- 引入Bootstrap和数据加载相关脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/data-loader.js"></script>
    <script src="js/upload-manager.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 